.notifications-container {
  @apply fixed z-20 bottom-6 right-6;
}

@keyframes notificationIn {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes notificationOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(8px);
  }
}

.notification {
  animation: notificationIn 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
    forwards;

  &.exiting {
    animation: notificationOut 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
      forwards;
  }
}

.flash-message {
  .hds-toast {
    @apply w-[400px];
  }
}
